<template>
  <div v-if=" goodslist" >
      
<div id="shop_header">
    <i class="el-icon-arrow-left" @click="back"></i>
    <span class="shop_header_font">商品详情</span>
    
  
</div>

<div >
    <img :src="goodslist[indexs].detail_img1" class="img1">
    <p class="name">{{goodslist[indexs].goods_name}}</p>
    <div class="special">
        {{goodslist[indexs].special}}
       <el-input-number  class="selectnum" v-model="addedgoods_num" @change="handleChange" :min="0" :max="100" label="描述文字"></el-input-number>
    </div>
    <p class="cos"><span class="cos1">￥</span><span  class="cos2">{{goodslist[indexs].cos}}.00</span></p>

    <div id="coinuse">
        <h2 class="coin_title">金币抵现<span class="coin_title1">(最高可抵扣200元)</span></h2>
        <img src="../../assets/mzhpic/coinpay.png" class="coin_img">
    </div>
    <img :src="goodslist[indexs].detail_img2"  class="detail-img">
    <img :src="goodslist[indexs].detail_img3"  class="detail-img">
    <img :src="goodslist[indexs].detail_img4"  class="detail-img">
    <img :src="goodslist[indexs].detail_img5"  class="detail-img">
</div>

<div id="shop_footer">
    <span class="total-font">总计：￥{{total}}.00</span>
    <el-button round type="success" @click="into_shoppingcart" v-show="cart"><i class="el-icon-plus into_cart"></i><i class="el-icon-shopping-cart-2 shoppingcart_img" ></i></el-button>
</div>
    
  </div>
</template>

<script>
export default {
    data:function () {
        return{
            total:0,
            indexs:9999999,
            goodslist:[],
             drawer: false,
             addedgoods_num:0,
             addedgoods:{},
             cart:false
             
           
            
            }
            
    },
 
      methods:{
      back:function () {
            this.$router.go(-1);
        },
     handleChange:function(num) {
              
         this.total=this.goodslist[this.indexs].cos*num;
        this.goodslist[this.indexs]['num']=num;
        delete this.goodslist[this.indexs].id;
        this.addedgoods=this.goodslist[this.indexs]
         console.log(this.addedgoods)
         if(num>0){
             this.cart=true
         }else{
             this.cart=false
         }
         
      },
 
      into_shoppingcart:function(){
            this.$http.post('/api/users/addedshopping',this.addedgoods).then(({
                    data,
                    config
                }) =>{
                    //解构语法
                    console.log(data, config);
                    if (data.code == 200) {
                        this.$message.success('成功加入购物车')
                       
                      
                        
                    } else {
                       this.$message.error('加入购物车失败')
                        
                    }
                })

      }
    
      

    },
    created:function (){
        this.goodslist=this.$route.params.goodslist;
        this.indexs=this.$route.params.indexs;
        this.total=this.goodslist[this.indexs].cos*0;

         this.goodslist[this.indexs]['num']=0;
        delete this.goodslist[this.indexs].id;
        this.addedgoods=this.goodslist[this.indexs]
         console.log(this.addedgoods)

        
        
      

    },
    mounted:function(){
        
        
        
    }

}
</script>

<style scoped>
.total-font{
    color: orange;
    font-size: 35px;
}
.detail-img{
    width: 90%;
}
.coin_img{
    width: 90%;
    margin: 10px 10px 10px 25px  ;
}
.coin_title1{
     margin: 10px 10px 10px 25px  ;
     font-size: 30px;
     color: rgb(173, 159, 159);
}
.coin_title{
     margin: 10px 10px 10px 25px  ;
}
.cos2{
    font-size: 80px;
    color: orange;
}
.cos1{
    font-size: 10px;
    color: orange;
}
.cos{
    margin: 10px 10px 10px 25px  ;
}
.selectnum{
 margin-left:60px;
}
.special{
    font-size: 15px;
    margin:10px 10px 10px 25px ;
    height: 40px;
    display: inline-block;
    /* background-color: rosybrown; */
}
.name{
    color: purple;
    font-size: 30px;
    margin:10px 10px 10px 25px ;
}

.img1{
    width: 100%;
    margin-top: 80px;
}

#shop_footer{
    z-index: 9999;
    width: 100%;
    height: 80px;
    bottom: 0;
    position:fixed;
    background-color: rgb(247, 241, 241);
    border-bottom: 1px solid rgb(190, 184, 184);
    display: flex;
    align-items: center;
    justify-content: space-around;
   
}
#shop_header{
    z-index: 999;
  width: 100%;
    height: 80px;
    position:fixed;
    top:0;
    background-color: white;
    border-bottom: 1px solid rgb(190, 184, 184);
    display: flex;
    align-items: center;
}
.shop_header_font{
    font-size: 35px;margin-left: 260px;
    font-weight: bold;
    margin-left: 270px;
 
}
.shoppingcart_img{
    font-size: 50px;
}
.into_cart{
    font-size: 30px;
}

</style>